<template>
  <div class="form-wrapper">
    <div class="block-header">
      <n-space>
        <div class="title">{{ $t("form list") }}</div>
        <n-select size="small" style="width: 180px" :options="sortOptions" v-model:value="searchParams.sort"></n-select>
      </n-space>
      <n-space style="margin-left: auto">
        <n-input style="width: 150px" size="small" :placeholder="$t('please input keyword')">
          <template #prefix>
            <n-icon :component="SearchOutline" />
          </template>
        </n-input>
        <n-button size="small" type="primary" secondary strong>{{
          $t("new form")
        }}</n-button>
      </n-space>
    </div>

    <div class="form-content">
      <n-data-table striped :columns="columns" :data="data" :pagination="pagination" :bordered="false" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, h } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import {
  SearchOutline,
  EllipsisVerticalOutline,
  DocumentTextOutline,
} from "@vicons/ionicons5";
import { NButton, useMessage } from 'naive-ui'
const sortOptions = ref([
  {
    label: t("create time newest"),
    value: 0,
  },
  {
    label: t("create time oldest"),
    value: 1,
  },
  {
    label: t("last open newest"),
    value: 2,
  },
  {
    label: t("last open oldest"),
    value: 3,
  },
]);

const pagination = ref(false)

const data = [
  { no: 3, title: 'Wonderwall', length: '4:18' },
  { no: 4, title: "Don't Look Back in Anger", length: '4:48' },
  { no: 12, title: 'Champagne Supernova', length: '7:27' },
]


const columns = ref([
  {
    title: 'No',
    key: 'no'
  },
  {
    title: 'Title',
    key: 'title'
  },
  {
    title: 'Length',
    key: 'length'
  },
  {
    title: '不知道叫什么',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          strong: true,
          tertiary: true,
          size: 'small',
          onClick: () => play(row)
        },
        { default: () => 'Play' }
      )
    }
  },
  {
    title: '不知道什么按钮',
    key: 'dontNO',
    render(row) {
      return h(
        NButton,
        {
          strong: true,
          tertiary: true,
          size: 'small',
          onClick: () => dontFun(row)
        },
        { default: () => 'dontFun' }
      )
    }
  }
])

const play = (val) => {
  console.log('val', val);
}

const dontFun = (val)=>{
  console.log('不知道什么按钮的',val)
}

const searchParams = reactive({
  sort: 0,
  page: 1,
  size: 20,
});
</script>

<style lang="scss" scoped>
.form-wrapper {
  padding-left: 2px;
}

.block-header {
  display: flex;
  align-items: center;

  // border: 1px solid red;
  .title {
    font-weight: bold;
    font-size: 24px;
  }
}

.form-content {
  // border: 1px solid red;
  margin-top: 3vh;
}
</style>